<template>
	<view class="page">

		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">发布宠物领养</block>
		</cu-custom>

		<view class="margin" style="border:1px solid #0081ff;">
			<view class="margin text-center">
				<view class="margin">宠物领养标题</view>
				<uni-easyinput v-model="adoptForm.adpotTitle" placeholder="宠物领养标题(不超过20字)" :inputBorder="true" />
			</view>
			<!-- 图片上传 -->
			<view class="margin">
				<uni-file-picker ref="files" limit="9" title="最多选择9张图片" :auto-upload="false" file-mediatype="image"
					file-extname="png,jpg" v-model="petImages" @select="selectIamge" @progress="progress"
					@success="success" @fail="fail" @delete="del">
				</uni-file-picker>
			</view>
			<view class="margin-bottom-xs bg-blue">
				<text class="margin-top margin-left margin-right">宠物基本信息</text>
			</view>
			<view class="margin">
				<uni-forms ref="baseForm" label-position="top">
					<uni-row :gutter="20">
						<uni-col :span="12">
							<uni-forms-item label="昵称" required>
								<uni-easyinput placeholder="请输入宠物昵称" v-model="adoptForm.adoptPetNick"
									:inputBorder="true" />
							</uni-forms-item>
						</uni-col>
						<uni-col :span="12">
							<uni-forms-item label="年龄" required>
								<uni-easyinput placeholder="请输入宠物年龄" v-model="adoptForm.adoptPetAge"
									:inputBorder="true" />
							</uni-forms-item>
						</uni-col>
					</uni-row>
					<uni-row :gutter="20">
						<uni-col :span="12">
							<uni-forms-item label="性别" required>
								<uni-data-select :border="true" placeholder="请选择宠物性别" v-model="adoptForm.adoptPetSex"
									:localdata="petSexList"></uni-data-select>
							</uni-forms-item>
						</uni-col>
						<uni-col :span="12">
							<uni-forms-item label="星球" required>
								<uni-data-select :border="true" placeholder="请选择宠物星球" v-model="adoptForm.adoptPetStar"
									:localdata="petStartList" @change="selectPetStar">
								</uni-data-select>
							</uni-forms-item>
						</uni-col>
					</uni-row>
					<uni-row :gutter="20">
						<uni-col :span="12">
							<uni-forms-item label="品种" required>
								<uni-data-select :border="true" placeholder="请选择宠物品种" v-model="adoptForm.adoptPetType"
									:localdata="petTypeList"></uni-data-select>
							</uni-forms-item>
						</uni-col>
						<uni-col :span="12">
							<uni-forms-item label="城市" required>
								<uni-data-picker ref="picker" placeholder="请选择城市" popup-title="请选择所在地区"
									:localdata="ChinaCitysList" v-model="adoptForm.adoptCity" @change="selectCity">
								</uni-data-picker>
							</uni-forms-item>
						</uni-col>
					</uni-row>
				</uni-forms>
				<!-- 送养人信息 -->
				<view class="margin-bottom-xs bg-blue">
					<text class="margin-top margin-left margin-right">送养人信息</text>
				</view>
				<view class="margin-bottom-xs">
					<uni-forms ref="baseForm">
						<uni-forms-item label="称呼" required>
							<uni-easyinput placeholder="送养人称呼" v-model="adoptForm.adoptPteUser" :inputBorder="true" />
						</uni-forms-item>
						<uni-forms-item label="手机" required>
							<uni-easyinput placeholder="请输入手机号" v-model="adoptForm.adoptPhone" :inputBorder="true" />
						</uni-forms-item>
						<uni-forms-item label="微信" required>
							<uni-easyinput placeholder="请输入微信号" v-model="adoptForm.adoptWechat" :inputBorder="true" />
						</uni-forms-item>
						<uni-forms-item label="QQ" required>
							<uni-easyinput placeholder="请输入QQ号" v-model="adoptForm.adoptQQ" :inputBorder="true" />
						</uni-forms-item>
						<uni-forms-item label="邮箱" :inputBorder="true" required>
							<uni-easyinput placeholder="请输入邮箱地址" v-model="adoptForm.adoptEmail" :inputBorder="true" />
						</uni-forms-item>
					</uni-forms>
				</view>
			</view>

			<!-- 领养条件 -->
			<view class="margin-bottom-xs bg-blue">
				<text class="margin-top margin-left margin-right">领养条件</text>
			</view>
			<view class="margin">
				<uni-data-checkbox mode="tag" multiple v-model="adoptForm.adoptCondition"
					:localdata="adoptConditionList" @change="selectCondition">
				</uni-data-checkbox>
			</view>
			<view class="margin-top-lg">
				<text class="margin-top margin-left margin-right ">TA的故事</text>
			</view>
			<view class="margin-left-lg margin-left-lg">
				<uni-easyinput maxlength="-1" type="textarea" autoHeight v-model="adoptForm.adoptPetStory"
					placeholder="请输入内容" :inputBorder="false"></uni-easyinput>
			</view>
		</view>
		<!-- 底部占位 -->
		<view style="height: 150rpx;"></view>
		<!-- 底部悬浮发布按钮 -->
		<view class="margin" style="position: fixed;bottom: 0;width: 100%;">
			<uni-row>
				<uni-col :span="4">
					<view style="height: 50rpx;"></view>
				</uni-col>
				<uni-col :span="16">
					<view class="senBtn" @click="adoptPush">
						发布
					</view>
				</uni-col>
				<uni-col :span="4">
					<view style="height: 50rpx;"></view>
				</uni-col>
			</uni-row>
		</view>

		<!-- 添加宠物星球 -->
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" title="添加宠物星球" :value="petStarform.starName"
				placeholder="星球名称" @confirm="addPetSatr"></uni-popup-dialog>
		</uni-popup>

		<!-- 添加领养条件 -->
		<!-- <uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" title="添加宠物星球" :value="petStarform.starName"
				placeholder="星球名称" @confirm="addPetSatr"></uni-popup-dialog>
		</uni-popup> -->

	</view>
</template>

<script>
	import {
		listStar,
		getStar,
		addStar
	} from "@/api/pets/star";
	import {
		listType
	} from "@/api/pets/type.js"
	import config from "@/config.js";
	import ChinaCity from "@/static/data/ChinaCitysData.js"
	import {
		getToken
	} from '@/utils/auth'
	import {
		listCondition
	} from '@/api/pets/condition.js'

	const baseUrl = config.baseUrl;
	var tempFilePath = '';

	export default {
		data() {
			return {
				//中国省份列表
				ChinaCitysList: ChinaCity.data,
				//宠物领养表单
				adoptForm: {
					//宠物领养标题
					adpotTitle: '',
					//宠物图片
					adoptImages: '',
					//宠物昵称
					adoptPetNick: '',
					//宠物性别
					adoptPetSex: '',
					//宠物年龄
					adoptPetAge: '',
					//宠物星球
					adoptPetStar: '',
					//宠物品种
					adoptPetType: '',
					//所在城市
					adoptCity: '',
					//送养人称呼
					adoptPetUser: '',
					//送养人手机
					adoptPhone: '',
					//condition微信
					adoptWechat: '',
					//conditionQQ
					adoptQQ: '',
					//condition邮箱
					adoptEmail: '',
					//领养条件
					adoptCondition: '',
					//宠物故事
					adoptPetStory: '',
					//领养标志
					adoptFlag: 0
				},
				//宠物性别列表
				petSexList: [{
						value: 0,
						text: '女孩'
					},
					{
						value: 1,
						text: '男孩'
					},
					{
						value: 2,
						text: '未知'
					}
				],
				//宠物照片
				petImages: [],
				//宠物年龄列表
				petAgeList: [],
				//宠物星球列表
				petStartList: [],
				//宠物品种列表
				petTypeList: [],
				//所在城市列表
				petCityList: [],
				//领养条件列表
				adoptConditionList: [],
				//添加宠物星球表单
				petStarform: {
					starImages: null,
					starName: null,
					remark: null
				},
				// 查询参数
				queryParams: {
					starId: null,
					typeName: null,
				},
			}
		},
		created() {
			this.getAllPetStars();
			this.getAllCondition();
		},
		methods: {
			//获取所有宠物星球
			getAllPetStars() {
				var starList = [];
				listStar().then(res => {
					for (var i = 0; i < res.rows.length; i++) {
						starList.push({
							value: res.rows[i].starId,
							text: res.rows[i].starName,
						})
					}
					starList.push({
						value: 0,
						text: '其他',
					});
					this.petStartList = starList;
				})
			},
			//获取所以宠物领养条件
			getAllCondition() {
				var ConditionList = [];
				listCondition().then(res => {
					for (var i = 0; i < res.rows.length; i++) {
						ConditionList.push({
							value: res.rows[i].conditionId,
							text: res.rows[i].conditionContent,
						})
					}
					this.adoptConditionList = ConditionList;
				})
			},
			//选择宠物领养条件
			selectCondition(e) {
				var str = '';
				e.detail.data.forEach(item => {
					str += item.text + ","
				})
				this.adoptCondition = str
			},
			//选择宠物星球
			selectPetStar(e) {
				this.adoptForm.adoptPetStar = e;
				this.queryParams.starId = e;
				this.petTypeList = [];
				this.adoptForm.adoptPetType = '';
				if (e === 0) {
					this.$refs.inputDialog.open()
				}
				if (e != 0) {
					listType(this.queryParams).then(res => {
						res.rows.forEach(item => {
							this.petTypeList.push({
								value: item.typeId,
								text: item.typeName
							})
						})
						if (this.petTypeList.length > 0) {
							this.adoptForm.adoptPetType = this.petTypeList[0].value;
						}
					})
				}
			},

			//添加宠物星球
			addPetSatr(val) {
				if (val != null) {
					this.petStarform.starName = val;
					this.petStarform.remark = '移动端添加';
					addStar(this.petStarform).then(response => {
						this.$modal.msgSuccess("新增成功");
						this.getAllPetStars();
						setTimeout(() => {
							let index = this.petStartList.length;
							this.adoptForm.adoptPetStar = this.petStartList[index - 2].value;
						}, 1000)
					});
				} else {
					uni.showLoading({
						title: '名称不能为空'
					})
					setTimeout(() => {
						uni.hideLoading();
						this.adoptForm.adoptPetStar = '';
						this.$refs.inputDialog.close();
					}, 500)
				}
			},

			// 选择城市
			selectCity(e) {
				this.adoptForm.petCity = e.detail.value[0].text + '-' + e.detail.value[1].text + '-' + e.detail.value[2]
					.text;
			},

			progress(e) {
				console.log("文件上传时触发", e)
			},
			success(e) {
				console.log("上传成功时触发", e)
			},
			fail(e) {
				console.log("上传失败时触发", e)
			},
			del(e) {
				console.log("删除", e)
			},
			selectIamge(e) {
				tempFilePath = e.tempFilePaths;
			},
			//发布宠物领养
			adoptPush() {
				if (tempFilePath.length > 0) {
					// 上传图片
					tempFilePath.forEach(item => {
						uni.uploadFile({
							url: baseUrl + '/common/upload',
							// 上传的文件
							filePath: item,
							name: 'file',
							// formData: {},
							// 请求头，设置token
							header: {
								'Authorization': getToken()
							},
							// 上传成功的回调函数
							success: (uploadFileRes) => {
								// 将上传的文件地址保存
								this.petImages[this.petImages.length] = JSON.parse(uploadFileRes.data)
									.fileName;
								// 数组转成指定字符串分隔
								this.adoptForm.adoptImages = this.petImages.join(',');
							},
						});
					})
					setTimeout(() => {
						// 
					}, 1000)
				}
			}
		}
	}
</script>

<style>
	.senBtn {
		background-color: #0081ff;
		text-align: center;
		height: 80rpx;
		width: 100%;
		line-height: 80rpx;
		border-radius: 40rpx;
		color: aliceblue;
	}
</style>